<template>
    <div class="tag">
        <div class="tag-left">
            <div class="tag-line"></div>
            <div class="tag-title">{{ title }}</div>
        </div>
        <div class="sort">
            <i class="iconfont icon-sort" v-show="showSortImg"></i>
            <slot></slot>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    showSortImg: {
        type: Boolean,
        default: false
    }
})
</script>
<style lang="scss" scoped>
.tag {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    .tag-left {
        display: flex;
        align-items: center;
        justify-content: center;

        .tag-line {
            width: 6px;
            height: 18px;
            background: #EF5A42;
            border-radius: 5px;
        }

        .tag-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            line-height: 28px;
            text-align: left;
            font-style: normal;
            margin-left: 16px;
        }
    }

    .sort {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #A4A4A4;
        line-height: 21px;
        font-style: normal;

        .sort-img {
            width: 15px;
            height: 15px;
            margin-right: 4px;
        }
    }
}
</style>